<template>
  <view class="index-all">
    <Header title="工具管理"></Header>
    <view class="tool-all">
      <view class="tool-text">
        <div class="title-left">常用工具</div>
        <div class="title-right"  @click="save">
          <view class="title-btn">保存</view>
        </div>
      </view>
      <view class="tool-list"  style="min-height: 10vh;">
        <view class="tool-item" v-for="(item, index) in applicationList" :key="index+ '_application'" @click="remove(index)">
<!--          <uv-badge type="info" :absolute="true" :offset="[0,0]"  value="-" :customStyle="{borderRadius:'50%'}"></uv-badge>-->
          <view class="badge-circle" style="background: rgba(64, 64, 64, 0.5); line-height: 14px;">-</view>
          <image class="index-menu-image"  :src="imgMinioPath + item.query"></image>
          <view class="tool-item-text">{{item.menuName ? item.menuName : '--'}}</view>
        </view>
      </view>
    </view>
    <view class="tool-all" v-for="(item, index) in menus" :key="index">
      <view class="tool-text">
          <view class="title-left">
        {{item.menuName ? item.menuName : '--'}}
          </view>
      </view>
      <view class="tool-list">
        <view class="tool-item"   v-for="(child, index1) in item.children" :key="index1" @click="add(child)">
<!--          <uv-badge type="primary" :absolute="true" :offset="[0,0]"  value="+" :customStyle="{borderRadius:'50%'}" v-if="isShow(child.id)"></uv-badge>-->
          <view  class="badge-circle" v-if="isShow(child.id)">+</view>
          <image class="index-menu-image"  :src="imgMinioPath + child.query"></image>
          <view class="tool-item-text">{{child.menuName ? child.menuName : '--'}}</view>
        </view>
      </view>
    </view>
    <Tabbar></Tabbar>
  </view>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, watchEffect, computed} from 'vue';
import api from '@/api/user/user'
import config from '@/common/config';
import {onLoad} from '@dcloudio/uni-app'

const {proxy} = getCurrentInstance();
const eventChannel = proxy.getOpenerEventChannel();
let applicationList = ref([{menuName:'555'},{menuName:'66'},{menuName:'555'},{menuName:'66'},{menuName:'555'},{menuName:'66'}]);      // 获取应用数据
let menus = ref([{ menuName:'菜单名称',children:[{menuName:'555'},{menuName:'555'},{menuName:'555'},{menuName:'555'},{menuName:'555'},{menuName:'555'}]}]);                  // 获取菜单数据

let count = ref({});                // 获取菜单数据
count.value = config.APPLICATION_COUNT;
let imgMinioPath = ref(config.IMG_MINIO_PATH);
// 获取用户菜单
let initMenu = async (e) => {
  let list = uni.getStorageSync('menus');
  menus.value = list.filter(item => {
    if (item.menuSource.indexOf(config.SCHOOL_MENU_SOURCE) !== -1) {
      return item;
    }
  })
};
initMenu();

// 获取我的工作台列表
let getApplicationList = async (e) => {
  let queryForm = {};
  let res = await proxy.http.asyncPost(api.getApplicationList, queryForm);

  if (res.code === 0) {
    let list = res.data;
    applicationList.value = list.filter(item => {
      if (item.menuSource.indexOf(config.SCHOOL_MENU_SOURCE) !== -1) {
        return item;
      }
    })
  }
}
getApplicationList();

const isShow = computed(()=>(item)=>{ //计算属性传递参数
  let list = applicationList.value.filter(temp => {
    if (temp.id == item) {
      return temp;
    }
  })
  let temp = list.length > 0 ? false : true;
  return temp;
})

// 移除
let remove = (index) => {
  applicationList.value.splice(index,1)
}

// 添加
let add = (item) => {
  if(isAdd(item.id)) {
    return
  }
  if(applicationList.value.length >= count.value) {
    let num = count.value
    uni.showToast({title: `最多添加${num}个常用工具，超出的部分请先移除!`, icon: 'none'});
    return
  } else {
    applicationList.value.push(item)
  }
}

/**
 * @author 胡志国
 * @description 是否允许添加
 * @date 2022年5月08日14:49:57
 **/
function isAdd(id) {
  let ids = func(applicationList.value);
  return ids.indexOf(id) !== -1 ? true : false
};
/**
 * 循环遍历菜单tree数据编号
 * @param {*} arr
 */
function func(arr){
  return arr.reduce((a, b) => {
    let res = [...a,b.id];
    return res;
  }, []);
};


// 获取我的工作台列表
let save = async (e) => {
  let res = await proxy.http.asyncPost(api.saveApplication, applicationList.value);
  if (res.code === 0) {
    uni.showToast({title: '保存成功'});
    uni.$emit("refresh", {});
    uni.navigateBack();
  } else {
    uni.showToast({title: result.msg, icon: 'none'});
  }
}
</script>

<style lang="scss" scoped>
.index-all {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background:#F8F9FC;
  .tool-all {
    width: 90%;
      margin: 24rpx auto 12rpx;
    background: #fff;
    border-radius: 16rpx;
    overflow: auto;
    .tool-text {
      display: flex;
      align-items: center;
        justify-content: space-between;
      width: 94%;
        margin: 24rpx auto 48rpx;
      font-size: var(--uni-font-size-14);
      color:$uni-text-color ;
      font-weight:bold;

    }
    .title-left {
     flex: 1;
      //margin-top: 20rpx;
        font-size: var(--uni-font-size-16);
      //margin-left: 10px;
    }
    .title-right {

      //margin-top: 10px;
      //margin-right: 15px;
      text-align: right;
      .title-btn {
        width: 96rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        color: var(--uni-text-color-white) ;
        border-radius: 24rpx;
        background: #3775F6;
      }
    }
    .tool-list {
      width: 96%;
        margin: 0 2%;
      .tool-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 25%;
        //height: 176rpx;
          margin-bottom: 40rpx;
        float: left;
        font-size: var(--uni-font-size-14);
        color:$uni-text-color ;
        position: relative;
        .tool-item-text {
          margin-top: 20rpx;
        }
        .iconfont {
          font-size: 60rpx;
        }

      }
    }
  }
}
::v-deep .uv-badge--info {
  background: rgba(156, 156, 156, 0.6);
  opacity: 0.4;
}
::v-deep .uv-badge--primary {
    padding: 2px 3px!important;
  opacity: 0.8;
}
::v-deep .uv-badge--not-dot {
  padding: 3px 5px;
}
::v-deep .uv-badge--info {
  padding: 1px 5px;
  background-color: rgba(156, 156, 156, 0.6);
}
.index-menu-image {
  width: 110rpx;
  height: 110rpx;
}
.badge-circle{
  text-align: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(49, 148, 255, 0.8);
  color: #fff;
  line-height: 15px;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
